import React, { Component } from 'react';
import { Form, Input, Modal } from 'antd';
import { SimpleSaveHoc } from '@/common/Hoc/SimpleSaveHoc';
import { TableMethods } from '@/common/Hoc/data';
import { save } from '@/services/quartz';
import TextArea from 'antd/es/input/TextArea';

const FormItem = Form.Item;

const baseMethods: TableMethods = {
  getSave: (param: any) => save(param),
};
@SimpleSaveHoc(baseMethods)
// @ts-ignore
@Form.create()
export default class extends Component<any, any> {
  constructor(props: any) {
    super(props);
  }
  formLayout = {
    labelCol: { span: 7 },
    wrapperCol: { span: 13 },
  };

  render() {
    const { modalVisible, currentData, form, loading, saveData } = this.props;

    return (
      <Modal
        width={640}
        bodyStyle={{ padding: '32px 40px 48px' }}
        destroyOnClose
        title="定时器管理"
        confirmLoading={loading}
        visible={modalVisible}
        onCancel={() => this.props.handleModalVisible(false)}
        onOk={() => saveData(form, currentData)}
      >
        <FormItem key="quartzName" {...this.formLayout} label="定时器名称">
          {form.getFieldDecorator('quartzName', {
            initialValue: currentData.quartzName,
          })(<Input placeholder="请输入定时器名称" />)}
        </FormItem>
        <FormItem key="cron" {...this.formLayout} label="cron表达式">
          {form.getFieldDecorator('cron', {
            initialValue: currentData.cron,
          })(<Input placeholder="请输入cron表达式" />)}
        </FormItem>
        <FormItem key="param" {...this.formLayout} label="参数">
          {form.getFieldDecorator('param', {
            initialValue: currentData.param,
          })(<Input placeholder="请输入定时器参数" />)}
        </FormItem>
        <FormItem key="quartzDesc" {...this.formLayout} label="定时器描述">
          {form.getFieldDecorator('quartzDesc', {
            initialValue: currentData.quartzDesc,
          })(<TextArea rows={2} placeholder="请输入定时器描述" />)}
        </FormItem>
      </Modal>
    );
  }
}
